<template>
  <el-container direction="vertical">
    <el-header>
      <el-menu mode="horizontal" default-active="currentRoute.path" router>
        <el-menu-item
          index="/basicInfo"
          class="menu-item"
          :class="{ 'active': $route.path === '/basicInfo' }"
        >基础信息维护</el-menu-item>
        <el-menu-item
          index="/extendedInfo"
          class="menu-item"
          :class="{ 'active': $route.path === '/extendedInfo' }"
        >机构扩展信息</el-menu-item>
        <el-menu-item
          index="/serviceFacilities"
          class="menu-item"
          :class="{ 'active': $route.path === '/serviceFacilities' }"
        >服务项目和设施</el-menu-item>
        <el-menu-item
          index="/term"
          class="menu-item"
          :class="{ 'active': $route.path === '/term' }"
        >服务条款</el-menu-item>
        <el-menu-item
          index="/note"
          class="menu-item"
          :class="{ 'active': $route.path === '/note' }"
        >须知与注意事项</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" label-width="120px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="统一社会信用码">
              <el-input v-model="form.uscc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人">
              <el-input v-model="form.legalPerson"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="法人电话">
              <el-input v-model="form.legalTel"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="养老床位数">
              <el-input v-model="form.bedNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="占地面积">
              <el-input v-model="form.area"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <template #label>
                <span>
                  机构等级
                  <span style="color: red;">*</span>
                </span>
              </template>
              <el-select v-model="form.grade" placeholder="请选择">
                <el-option
                  v-for="grade in provinces"
                  :key="grade.id"
                  :label="grade.name"
                  :value="grade.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="header-buttons">
        <!-- 其他内容 -->
        <el-button type="primary" @click="update">编辑</el-button>
      </div>
    </el-main>
  </el-container>
</template>


<script>
export default {
  data() {
    return {
      form: {
        uscc: "",
        legalPerson: "",
        legalTel: "",
        bedNum: "",
        area: "",
        grade: ""
      },
      provinces: [
        { id: "1", nama: "一级" },
        { id: "2", nama: "二级" },
        { id: "3", nama: "三级" }
      ]
    };
  },
  methods: {
    update() {
      // 验证必填项
      if (!this.form.grade) {
        this.$message.error("请填写所有必填项！");
        return;
      }
      console.log("信息: ", this.form);
      let mechanismextend = this.form;
      this.$axios
        .post("api/mechanism/updateMechanismextend", mechanismextend)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success("提交成功!");
            this.queryById();
            // this.$router.push({ path: "/basicInfo" });
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },

    queryById() {
      this.$axios.get("api/mechanism/queryByExtendId/" + "1").then(res => {
        if (res.data.code == 200) {
          console.log(res.data);
          const originalForm = res.data.data;

          // 数字代码转为下拉列表的值
          const grade = this.provinces.find(
            item => item.id === String(originalForm.grade)
          );

          originalForm.grade = grade ? grade.id : "";

          //最后将值数组赋值给form.currentAddress
          this.form = originalForm;
        }
      });
    },
    findValueByLabel(options, labels, index = 0) {
      const valuePath = [];

      function findInChildren(children, label) {
        let found = false;
        for (let child of children) {
          if (child.label === label) {
            valuePath.push(child.value);
            found = true;
            break;
          }
        }

        return found;
      }

      const currentLabel = labels[index];
      if (options.some(option => findInChildren([option], currentLabel))) {
        if (index < labels.length - 1) {
          let nextOptions = options.find(
            option => option.label === currentLabel
          ).children;
          let nextValues = this.findValueByLabel(
            nextOptions,
            labels,
            index + 1
          );
          if (nextValues) {
            valuePath.push(...nextValues);
          }
        }
        return valuePath;
      }
    }
  },
  created() {
    this.queryById();
  }
};
</script>

<style>
.menu-item.active {
  background-color: #3e9ff5; /* 选中菜单项的背景色 */
  color: #333; /* 选中菜单项的文字颜色 */
}
.header-buttons {
  display: flex;
  justify-content: flex-end;
}
</style>
